<template>
  <div class="home-box">
    <div class="header-top">
      <h1>活动规则</h1>
    </div>
    <div class="main-box">
      <div class="content-box">
        <img src="/static/img/881312668413686269.jpg"/>
      </div>
    </div>
  </div>
</template>

<script>
import timedown from '@/components/time-down'
export default {
  name: 'home',
  components: {
    timedown
  },
  data () {
    return {
      content: '',
      site: null
    }
  },
  created () {
    // this.getRule()
  },
  methods: {
    getRule: function () {
      this.$http.get('../assets/json/rule.text')
        .then(function (res) {
          this.site = res.data.data
          this.title = res.data.data.jobName
          this.content = res.data.data.jobDescription
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .home-box{
    position: relative;
    height: 100%;
    width: 100%;
    padding: 10px;
    background-image: url(../assets/longYourName.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    overflow-y: auto;
  }
  @media screen and (max-width: 600px) {
    .home-box{
      background-image: url(../assets/yourName.jpg);
    }
  }
  .header-top{
    position: relative;
  }
  .header-top>h1{
    margin-right: 40%;
    padding-left: 10px;
    line-height: 50px;
    font-size: 24px;
    color: #fff;
    text-align: left;
    font-weight: 700;
  }
  .score-display>span{
    display: block;
    height: 40%;
    line-height: initial;
    color: #fff;
    font-size: 14px;
  }
  .score-display>b{
    display: block;
    height: 60%;
    line-height: initial;
    color: #FFCC00;
    font-size: 28px;
  }
  .main-box{
    margin: 0 auto;
    margin-top: -2px;
  }
  .content-box{
    line-height: 1.5em;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    color: #fff;
  }
  .content-box>img{
    width: 100%;
  }
</style>
